import { getInfoByPage, addInfo, updateInfo, delInfo } from '@/services/project/info';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
const Info: React.FC<{}> = () => {
const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
  const columns: ProColumns[] = [
        {
        title: '序号',
        dataIndex: 'index',
        valueType: 'index',
        width: 80,
        },
        {
          title: '市',
          dataIndex: 'city',
        },
        {
          title: '联系人',
          dataIndex: 'contactName',
        },
        {
          title: '联系电话',
          dataIndex: 'contactNo',
        },
        {
          title: '合同金额',
          dataIndex: 'contractAmount',
        },
        {
          title: '合同编码',
          dataIndex: 'contractCode',
        },
        {
          title: '合同日期',
          dataIndex: 'contractDate',
        },
        {
          title: '合同名称',
          dataIndex: 'contractName',
        },
        {
          title: '项目状态',
          dataIndex: 'contractState',
        },
        {
          title: '国家',
          dataIndex: 'country',
        },
        {
          title: '客户地址',
          dataIndex: 'customerAddress',
        },
        {
          title: '客户编码',
          dataIndex: 'customerCode',
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
        },
        {
          title: '交货地点',
          dataIndex: 'deliveryAddress',
        },
        {
          title: '交货日期',
          dataIndex: 'deliveryDate',
        },
        {
          title: '备注',
          dataIndex: 'memo',
        },
        {
          title: '项目编码',
          dataIndex: 'projectCode',
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
        },
        {
          title: '省',
          dataIndex: 'province',
        },
        {
          title: '预留',
          dataIndex: 'reserved',
        },
        {
          title: '流水号',
          dataIndex: 'serialNo',
        },
        {
          title: '销售订单号',
          dataIndex: 'so',
        },
        {
        title: '创建日期', //表头显示的名称
        search: false,
        dataIndex: 'createTime',
        },
        {
        title: '创建人', //表头显示的名称
        search: false,
        dataIndex: 'createName',
        },
        {
        title: '操作',
        valueType: 'option',
        key: 'option',
        fixed: 'right',
        render: (text, record, _, action) => [
        <a
                key="editKey"
                onClick={() => {

        setModalVisit(true);
        setCreateOrUpdate(true);
        setFormTitle('编辑');
        form.setFieldsValue({
        city: record.city,
        contactName: record.contactName,
        contactNo: record.contactNo,
        contractAmount: record.contractAmount,
        contractCode: record.contractCode,
        contractDate: record.contractDate,
        contractName: record.contractName,
        contractState: record.contractState,
        country: record.country,
        customerAddress: record.customerAddress,
        customerCode: record.customerCode,
        customerName: record.customerName,
        deliveryAddress: record.deliveryAddress,
        deliveryDate: record.deliveryDate,
        memo: record.memo,
        projectCode: record.projectCode,
        projectName: record.projectName,
        province: record.province,
        reserved: record.reserved,
        serialNo: record.serialNo,
        so: record.so,
        id: record.id,
        });
        }}
        >
        编辑
        </a>,
        <a
                key="deleteKey"
                onClick={() => {


        Modal.confirm({
        title: '删除',
        content: '确定要删除吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
        await delInfo({ id: record.id });
        actionRef.current.reload();
        },
        });

        }}
        >
        删除
        </a>,
        ],
        },
  ];
  const handleSubmit = async () => {
        setConfirmLoading(true);
        if (formTitle == '新建') {
          const result = await addInfo(form.getFieldsValue());
        if (result != null) {
          message.success('添加成功');
        }
        } else {
          await updateInfo(form.getFieldsValue());
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current.reload();
  };

  return (
  <PageHeaderWrapper>
    <ProTable
        headerTitle="xx查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                    setCreateOrUpdate(false);
                    setFormTitle('新建');
                    form.resetFields();
                    setModalVisit(true);
                }}
                type="primary"
                >
                新建
                </Button>,
        ]}
        request={async (params = {}, sort, filter) => {

                const sorters = sortTran(sort);
                const filters = filterTran(params);
                const result = await getInfoByPage({ ...params, sorters: sorters, filters: filters });
                return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
                };

        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
    />
    <Modal
            title={formTitle}
            visible={modalVisit}
            onOk={handleSubmit}
            confirmLoading={confirmLoading}
            onCancel={() => setModalVisit(false)}
    >
    <Form
            name="wrap"
            labelCol={{ flex: '110px' }}
            labelAlign="left"
            labelWrap
            form={form}
            wrapperCol={{ flex: 1 }}
            colon={false}
    >
          <Form.Item label="id" name="id" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item
                  label="市"
                  name="city"
                  rules={[{ required: true, message: 'Please input your city!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="联系人"
                  name="contactName"
                  rules={[{ required: true, message: 'Please input your contactName!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="联系电话"
                  name="contactNo"
                  rules={[{ required: true, message: 'Please input your contactNo!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="合同金额"
                  name="contractAmount"
                  rules={[{ required: true, message: 'Please input your contractAmount!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="合同编码"
                  name="contractCode"
                  rules={[{ required: true, message: 'Please input your contractCode!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="合同日期"
                  name="contractDate"
                  rules={[{ required: true, message: 'Please input your contractDate!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="合同名称"
                  name="contractName"
                  rules={[{ required: true, message: 'Please input your contractName!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="项目状态"
                  name="contractState"
                  rules={[{ required: true, message: 'Please input your contractState!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="国家"
                  name="country"
                  rules={[{ required: true, message: 'Please input your country!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="客户地址"
                  name="customerAddress"
                  rules={[{ required: true, message: 'Please input your customerAddress!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="客户编码"
                  name="customerCode"
                  rules={[{ required: true, message: 'Please input your customerCode!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="客户名称"
                  name="customerName"
                  rules={[{ required: true, message: 'Please input your customerName!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="交货地点"
                  name="deliveryAddress"
                  rules={[{ required: true, message: 'Please input your deliveryAddress!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="交货日期"
                  name="deliveryDate"
                  rules={[{ required: true, message: 'Please input your deliveryDate!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="备注"
                  name="memo"
                  rules={[{ required: true, message: 'Please input your memo!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="项目编码"
                  name="projectCode"
                  rules={[{ required: true, message: 'Please input your projectCode!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="项目名称"
                  name="projectName"
                  rules={[{ required: true, message: 'Please input your projectName!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="省"
                  name="province"
                  rules={[{ required: true, message: 'Please input your province!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="预留"
                  name="reserved"
                  rules={[{ required: true, message: 'Please input your reserved!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="流水号"
                  name="serialNo"
                  rules={[{ required: true, message: 'Please input your serialNo!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
                  label="销售订单号"
                  name="so"
                  rules={[{ required: true, message: 'Please input your so!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
        </Form>
      </Modal>
  </PageHeaderWrapper>
  );
  };
  export default Info;
